---
title: Etichetta
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Componente per categorizzare o etichettare visivamente i contenuti.

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props      | Tipo     | Descrizione                                                                                                                                                                 |
| ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nomeClasse | string   | Nome opzionale per stile aggiuntivo                                                                                                                                         |
| colore     | string   | Colore dell'etichetta. Le opzioni includono: `verde`, `turchese`, `cielo`, `blu`, `viola`, `rosa`, `rosso`, `arancione`, `giallo`, `grigio` |
| testo      | string   | Il contenuto dell'etichetta                                                                                                                                                 |
| onClick    | funzione | Funzione opzionale chiamata quando un utente clicca sull'etichetta                                                                                                          |

</Tab>

</Tabs>
